<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>资料下载 - 研究僧</title>
  <style type="text/css">
  body {
    width: 700px;
    margin: 0 auto;
    font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
  }
  h1 {
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 30px;
  }
  th {
    border-bottom: 2px solid #ddd;
  }
  td {
    border-bottom: 1px solid #ddd;
    line-height: 33px;
  }
  a {
    text-decoration: none;
  }
  table {
    margin-top: 20px;
  }
  .one {
    width: 200px;
  }
  .two {
    width: 400px;
  }
  .three {
    width: 80px;
  }
  button {
    width: 229px;
    height: 30px;
    font-size: 16px;
  }
  </style>
</head>

<body>
  <h1>资料下载</h1>
  <button id="math">数学</button>
  <button id="english">英语</button>
  <button id="politics">政治</button>
  <table>
    <thead>
      <tr>
        <th class="one">文件名</th>
        <th class="two">描述</th>
        <th class="three">下载</th>
      </tr>
    </thead>
    <tbody>
      <tr class="math">
        <td>数学真题.pdf</td>
        <td>数学</td>
        <td>
          <a href="#">下载链接</a>
        </td>
      </tr>
      <tr class="english">
        <td>英语真题.pdf</td>
        <td>英语</td>
        <td>
          <a href="#">下载链接</a>
        </td>
      </tr>
      <tr class="politics">
        <td>政治真题.pdf</td>
        <td>政治</td>
        <td>
          <a href="#">下载链接</a>
        </td>
      </tr>
    </tbody>
  </table>
  <script type="text/javascript">
  var trs = document.getElementsByTagName('tr');
  var lessons = ['math', 'english', 'politics'];

  for(var i = 0; i < lessons.length; i++) {
    (function(i) {
      document.getElementById(lessons[i]).onclick = function() {
        var show = document.getElementsByClassName(lessons[i]);
        for (var j = 1; j < trs.length; j++) {
          trs[j].style.display = "none";
        };
        for (var k = 0; k < show.length; k++) {
          show[k].style.display = "";
        };
      }
    })(i)
  }

  // document.getElementById(lessons[0]).onclick = function() {
  //   for (var j = 1; j < trs.length; j++) {
  //     trs[j].style.display = "none";
  //   };
  //   var show = document.getElementsByClassName(lessons[0]);
  //   for (var k = show.length - 1; k >= 0; k--) {
  //     show[k].style.display = "";
  //   };
  // }
  // document.getElementById(lessons[1]).onclick = function() {
  //   for (var j = 1; j < trs.length; j++) {
  //     trs[j].style.display = "none";
  //   };
  //   var show = document.getElementsByClassName(lessons[1]);
  //   for (var k = show.length - 1; k >= 0; k--) {
  //     show[k].style.display = "";
  //   };
  // }
  // document.getElementById(lessons[2]).onclick = function() {
  //   for (var j = 1; j < trs.length; j++) {
  //     trs[j].style.display = "none";
  //   };
  //   var show = document.getElementsByClassName(lessons[2]);
  //   for (var k = show.length - 1; k >= 0; k--) {
  //     show[k].style.display = "";
  //   };
  // }
  </script>
</body>

</html>
